﻿<%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="~/MasterPage.master" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="sideBar" ContentPlaceHolderID="sideBarContent" Runat="Server">
        <h3>Категории</h3>
        
        <dl><dd><ul>
            <asp:Repeater ID="rptCategories" runat="server">
            <ItemTemplate>
                <li>
                    <a href="#" onclick = "return loadProducts('<%#Eval("categoryId")%>', '<%#Eval("categoryName")%>')">
                        <%#Eval("categoryName")%> (<%#Eval("prodCount")%>)
                    </a>
                </li>
            </ItemTemplate>
            </asp:Repeater>
        
        </ul></dd></dl>
</asp:Content>

<asp:Content ID="DefaultContent" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
    
    <script type ="text/javascript">
       
    function getAvailableBrands(categoryId) {
    
    }
    
    function loadProducts(categoryId, categoryName) {
            remove();
            add(); 
            $('#cont1').load(
                "Controller.ashx",
                {cmd: "get", categoryId: categoryId},
                function(data) {
                    $('#brandMenu').insertBefore('#container');
                    $("#brandMenu > ul").tabs({
                        select: function(e, ui) {
                            doFilter(ui);
                            return false;
                        }
                    });
                    
                    $('#cont1 li').clone().appendTo('#carousel');
                   
                    
                       
                    carousel = new YAHOO.widget.Carousel("container", {
                        animation: { speed: 0.5 }
                    });
                  
                    carousel.set("selectedItem", 0);

                    carousel.render(); // get ready for rendering the widget
                    carousel.show();   // display the widget
                    
                    $('<span style="float: left;">' + categoryName + '</span>').insertBefore('#container > div > ul');
                },
                'html'
            )
    }  
         
         function remove() {
            $('#carouselWrapper').empty();
         } 
          function add() {
            $('#carouselWrapper').append("<div id='container'><ol id='carousel'></ol></div>");
         } 

        var items = new Array;
        function filterByBrand(brandId) {
        
            items = [];
            
            $("#carousel li[brandid!='" + brandId + "']").remove();

            //carousel.set('numItems',4);  
            carousel.render();
                
        }
        
        function filterByBrand1(brandId) {
            
            remove();
            add(); 
            $('#cont1 li').each(function() {
                $(this).clone().appendTo('#carousel');
            })
            carousel = new YAHOO.widget.Carousel("container", {
                        animation: { speed: 0.5 }
                    });

            
  
            
                    
                carousel.render();
                carousel.show(); 
        }
        
        function resize() {
            carousel.set('numItems',2); 
        }
        
        function doFilter(obj) {
            alert($(obj).attr('href'));
        }
        
      
        
    </script>
    
    <h2 id="post-2" class="entry-title">About</h2>
    <div class="body">
    
    
            
         <input type ="button" onclick = "filterByBrand('b1438105-2a3e-4ac9-8a7e-27d11507986b');" value = "filter" />   
       <input type ="button" onclick = "filterByBrand1('b1438105-2a3e-4ac9-8a7e-27d11507986b');" value = "filter1" />   
   
   <input type ="button" onclick = "carousel.set('numItems',2);carousel.render();" value = "resize 2" />
   <input type ="button" onclick = "carousel.set('numItems',6);carousel.render();" value = "resize 6" />
       
       
       <div id = "carouselWrapper"  class="yui-skin-sam" style ="width: 630px; height: 250px;">
            <!-- The Carousel container -->
            <div id="container">
                <ol id="carousel">

                </ol>
            </div> 
        </div>
        
        
        <div id="cont1" style ="display:none;"></div>
    </div>
</asp:Content>
